<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ page import="java.sql.*" %>
<%@ page import="com.data.ConnData" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>答题综合统计（Echarts）</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/jquery.js"></script>
    <script src="../js/bootstrap.js"></script>
    <script src="../js/echarts.js"></script> <!-- 引入Echarts库 -->
    <style>
        table {
            border-collapse: collapse;
            width: 80%;
            margin: 0 auto;
        }

        th, td {
            border: 1px solid #ddd;
            text-align: left;
            padding: 8px;
        }

        th {
            background-color: #f2f2f2;
        }

        /* 为图表容器设置样式 */
        #chartContainer1 {
            width: 80%;
            margin: 20px auto;
            height: 400px;
        }

        #chartContainer2 {
            width: 80%;
            margin: 20px auto;
            height: 400px;
        }
    </style>
</head>

<body>
<ul class="nav nav-pills" style="padding-top: 20px">
    <li class="nav-item" style="padding-left: 250px">
        <a class="nav-link" style="color: black" href="conversation.jsp">笔记</a>
    </li>
    <li class="nav-item" style="padding-left: 250px">
        <a class="nav-link" style="color: black" href="question.jsp">题目</a>
    </li>
    <li class="nav-item" style="padding-left: 250px">
        <a class="nav-link" style="color: black" href="rank.jsp">排行榜</a>
    </li>
    <li class="nav-item" style="padding-left: 250px">
        <a class="nav-link active"  href="me.jsp">我的</a>
    </li>
</ul>
<hr>

<%
    ConnData objdata = new ConnData();
    Connection connection = null;
    PreparedStatement psmt = null;
    ResultSet resultSet = null;
    try {
        connection = objdata.getConn();
        String getSessionUser = (String) session.getAttribute("sess_user");

        // 查询当前用户答题记录，统计正确和错误的数量
        String sql = "SELECT ua.* FROM user_answer_table ua JOIN user_table ut ON ua.user_id = ut.ID WHERE ut.nickname =?";
        psmt = objdata.getPsmt(sql);
        psmt.setString(1, getSessionUser);
        resultSet = psmt.executeQuery();

        // 用于统计正确和错误的数量
        int correctCount = 0;
        int wrongCount = 0;
        while (resultSet.next()) {
            int answerStatus = resultSet.getInt("answer_status");
            if (answerStatus == 1) {
                correctCount++;
            } else {
                wrongCount++;
            }
        }
        // 计算总数
        int totalCount = correctCount + wrongCount;
        double correctPercentage = (double) correctCount / totalCount * 100;
        double wrongPercentage = (double) wrongCount / totalCount * 100;
%>

<!-- 展示答题情况统计扇形图的容器 -->
<div id="chartContainer1"></div>

<script>
    // 基于准备好的dom，初始化echarts实例（用于扇形图）
    var myChart1 = echarts.init(document.getElementById('chartContainer1'));

    // 指定扇形图的配置项和数据
    var option1 = {
        title: {
            text: '个人答题情况统计',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: '答题情况',
                type: 'pie',
                radius: '50%',
                data: [
                    {value: <%=correctPercentage%>, name: '正确', itemStyle: {color: '#AFF0B5'}},  // 修改此处设置正确的颜色
                    {value: <%=wrongPercentage%>, name: '错误', itemStyle: {color: '#4CD263'}}   // 修改此处设置错误的颜色
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    // 使用刚指定的配置项和数据显示扇形图
    myChart1.setOption(option1);
</script>

<%
    // 重新获取数据库连接相关资源，准备查询前10名平均答题数数据（假设user_answer_table中有user_id字段）
    connection = objdata.getConn();
    // 使用子查询获取前10名用户的平均答题数
    String sql2 = "SELECT ut.nickname, AVG(ua.answer_count) AS average_answer_count " +
            "FROM user_table ut " +
            "JOIN (SELECT user_id, COUNT(*) AS answer_count FROM user_answer_table GROUP BY user_id) ua ON ut.ID = ua.user_id " +
            "GROUP BY ut.ID " +
            "ORDER BY average_answer_count DESC " +
            "LIMIT 10";
    psmt = objdata.getPsmt(sql2);
    resultSet = psmt.executeQuery();

    // 用于存储昵称和平均答题数的数组
    String[] nicknames = new String[10];
    double[] averageAnswerCounts = new double[10];
    int index = 0;

    // 循环遍历结果集，正确获取数据并填充数组，同时要考虑结果集可能不足10条数据的情况
    while (resultSet.next() && index < 10) {
        nicknames[index] = resultSet.getString("nickname");
        averageAnswerCounts[index] = resultSet.getDouble("average_answer_count");
        index++;
    }
%>

<!-- 展示前10名平均答题数折线图的容器 -->
<div id="chartContainer2"></div>

<script>
    // 基于准备好的dom，初始化echarts实例（用于折线图）
    var myChart2 = echarts.init(document.getElementById('chartContainer2'));

    // 用于Echarts折线图的x轴数据（用户昵称）数组
    var xAxisData = [];
    // 用于Echarts折线图的y轴数据（平均答题数）数组
    var seriesData = [];
    <%
        // 将Java代码中获取到的数据填充到JavaScript数组中
        for (int i = 0; i < index;i++)
    {
    %>
    xAxisData.push('<%=nicknames[i]%>');
    console.log("<%=nicknames[i]%>")
    console.log("<%=i%>")
    seriesData.push(<%=averageAnswerCounts[i]%>);
    <%
    }
    %>

    var option2 = {
        title: {
            text: '平均答题数统计',
            left: 'center'
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            data: xAxisData
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                type: 'line',
                data: seriesData
            }
        ]
    };

    // 使用刚指定的配置项和数据显示折线图
    myChart2.setOption(option2);
</script>

<%
} catch (SQLException e) {
    e.printStackTrace();
%>
<p>数据库操作出现错误，请稍后再试！</p>
<%
    } finally {
        if (resultSet != null) {
            try {
                resultSet.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        if (psmt != null) {
            try {
                psmt.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        if (connection != null) {
            try {
                connection.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }
%>
<div style="text-align: center;margin:30px">
<a href="../index.jsp" class="btn btn-success" >退出登录</a>
</div>
</body>

</html>